body{
    padding-bottom:1.1rem;
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;


    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f84b38+39,fcca2b+74,fcca2b+89,feb815+100 */
    background: #f84b38; /* Old browsers */
    background: -moz-linear-gradient(top, #f84b38 39%, #fcca2b 74%, #fcca2b 89%, #feb815 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #f84b38 39%,#fcca2b 74%,#fcca2b 89%,#feb815 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #f84b38 39%,#fcca2b 74%,#fcca2b 89%,#feb815 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f84b38', endColorstr='#feb815',GradientType=0 ); /* IE6-9 */
}

.f1{
    width: 100%;


}

.f1>.bg{
    width: 100%;
}

.b{
    width: 100%;
    height: 1rem;
    position: absolute;
    top:7.8rem;
}

.b>img{
    width: 4.1rem;
}

.b>img:active{
    transform: scale(0.98);
}

.song{
    padding: 0 .3rem;
    width: 100%;

}

.song>img{
    width: 3.2rem;
}

.song>img:active{
    transform: scale(0.98);
}

.f2{
    width: 100%;
    margin-top: .1rem;
}
.title2{
    width: 100%;
    background-color: transparent;
}
.title2>img{
    width: 5.6rem;
}

.jiaoyi{
    width: 100%;
    margin-top: 0.2rem;

}

.jiaoyi>img{
    width: 6.7rem;
}

.title3>img{
    width: 6.22rem;

}


.f4{
    width: 100%;
}

.title4{
    width: 100%;
}
.title4>img{
    width: 7.08rem;
}

.bbb{
    width: 100%;
}

.box{
    width: 6.7rem;
    height: 1rem;
    background-color: #ff4733;
    border-radius: 5rem;
    font-size: .36rem;
    color: white;
    box-shadow: 0 10px 20px rgba(198,32,14,0.5) inset;
}

.swiper-container {
    width: 6.7rem;
    height: 1rem;
    background-color: transparent;
}

.head>p{
    font-size: .36rem;
    color: white;
    line-height: .8rem;
}

.touxiang{
    width: 100%;
    height: 1rem;
    padding-top: .24rem;
    padding-right: .8rem;

}

.touxiang img{
    width: .68rem;
    height: .68rem;
    border-radius: 50%;
}

.q{
    position:absolute;
    left:1rem;
    top:37.5rem;
    z-index:1;
}
.w{
    position:absolute;
    left:1.5rem;
    top:37.5rem;
    z-index:2;
}

.e{
    position:absolute;
    left:2rem;
    top:37.5rem;
    z-index:3;
}

.r{
    position:absolute;
    left:2.5rem;
    top:37.5rem;
    z-index:4;
}

.t{
    position:absolute;
    left:3rem;
    top:37.5rem;
    z-index:5;
}

.y{
    position:absolute;
    left:3.5rem;
    top:37.5rem;
    z-index:6;
}

.u{
    position:absolute;
    left:4rem;
    top:37.5rem;
    z-index:7;
}

.i{
    position:absolute;
    left:4.5rem;
    top:37.5rem;
    z-index:8;
}

.o{
    position:absolute;
    left:5rem;
    top:37.5rem;
    z-index:9;
}

.touxiang>.more{
    width: 0.62rem;
    border-radius: 0;
    height: auto;
}
.shuru{
    width: 4rem;
    height: .7rem;
    background-color: white;
    border-radius: 20px;
    padding: 0 0.2rem;
}

.shuru>input{
    height: 100%;
    width: 3rem;
    font-size: .32rem;
    color: #8f8f8f;
}
.shuru>i{
    font-size: .4rem;
    color: #8f8f8f;
}


.dilan{
    width:100%;
    height: 1.1rem;
    padding: 0 0.2rem;
    background-color: #f7503e;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9999999;
}

.dilan>.hezi{
    width: 1rem;
}

.dilan>.liji{
    width: 1.6rem;
}

.dilan>.liji:active{
    transform: scale(0.98);
}